<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Components</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
	<link rel="stylesheet" href="assets/css/ready.css">
	<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
	<!-- <div class="wrapper">
		<div class="main-header">
			<div class="logo-header">
				<a href="index.html" class="logo">
					Ready Dashboard
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
			</div>
			<nav class="navbar navbar-header navbar-expand-lg">
				<div class="container-fluid">
					
					<form class="navbar-left navbar-form nav-search mr-md-3" action="">
						<div class="input-group">
							<input type="text" placeholder="Search ..." class="form-control">
							<div class="input-group-append">
								<span class="input-group-text">
									<i class="la la-search search-icon"></i>
								</span>
							</div>
						</div>
					</form>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-envelope"></i>
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">
								<li>
									<div class="dropdown-title">You have 4 new notification</div>
								</li>
								<li>
									<div class="notif-center">
										<a href="#">
											<div class="notif-icon notif-primary"> <i class="la la-user-plus"></i> </div>
											<div class="notif-content">
												<span class="block">
													New user registered
												</span>
												<span class="time">5 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-success"> <i class="la la-comment"></i> </div>
											<div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-img"> 
												<img src="assets/img/profile2.jpg" alt="Img Profile">
											</div>
											<div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-danger"> <i class="la la-heart"></i> </div>
											<div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
												<span class="time">17 minutes ago</span> 
											</div>
										</a>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);"> <strong>See all notifications</strong> <i class="la la-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false"> <img src="assets/img/fangzebin.jpg" alt="user-img" width="36" class="img-circle"><span >方泽斌</span></span> </a>
							<ul class="dropdown-menu dropdown-user">
								<li>
									<div class="user-box">
										<div class="u-img"><img src="assets/img/fangzebin.jpg" alt="user"></div>
										<div class="u-text">
											<h4>方泽斌</h4>
											<p class="text-muted">hello@themekita.com</p><a href="一.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
										</div>
									</li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/curriculum_vitae/"><i class="ti-user"></i> 我的简历</a>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/fangzebin/"></i> 我的博客</a>
									<a class="dropdown-item" href="index.html"><i class="fa fa-power-off"></i> 登出</a>
								</ul>
								<!-- /.dropdown-user -->
							<!-- </li>
						</ul>
					</div>
				</nav>
			</div>
			<div class="sidebar">
				<div class="scrollbar-inner sidebar-wrapper">
					<div class="user">
						<div class="photo">
							<img src="assets/img/fangzebin.jpg">
						</div>
						<div class="info">
							<a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									方泽斌
									<span class="user-level">Administrator</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
								<ul class="nav">
									<li>
										<a href="https://fang_se_bin.gitee.io/curriculum_vitae/">
											<span class="link-collapse">我的简历</span>
										</a>
									</li>
									<li>
										<a href="https://fang_se_bin.gitee.io/fangzebin/">
											<span class="link-collapse">我的博客</span>
										</a>
									</li>
									<li>
										<a href="index.html">
											<span class="link-collapse">登出</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item">
							<a href="一.html">
								<i class="la la-dashboard"></i>
								<p>数据总故事</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-item active">
							<a href="二.html">
								<i class="la la-table"></i>
								<p>年末常住人口</p>
								<span class="badge badge-count">14</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="三.html">
								<i class="la la-keyboard-o"></i>
								<p>出生率与死亡率</p>
								<span class="badge badge-count">50</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="四.html">
								<i class="la la-th"></i>
								<p>平均年工资</p>
								<span class="badge badge-count">6</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="五.html">
								<i class="la la-bell"></i>
								<p>自然灾害</p>
								<span class="badge badge-success">3</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="六.html">
								<i class="la la-font"></i>
								<p>总结与建议</p>
								<span class="badge badge-danger">25</span>
							</a>
                        </li>
                        <li class="nav-item update-pro">
							<button  data-toggle="modal" data-target="#modalUpdate">
								<i class="la la-hand-pointer-o"></i>
                                <p>Update to pro</p>
							</button>
						</li>
						<li class="nav-item">
							<a href="https://gitee.com/fang_se_bin/python-final-project">
								<i class="la la-fonticons"></i>
								<p>技术文档</p>
							</a>
                        </li>
                        <li class="nav-item">
							<a href="https://data.stats.gov.cn/index.htm">
								<i class="la la-fonticons"></i>
								<p>数据来源</p>
							</a>
						</li>
						
					</ul>
				</div>
			</div> -->
			<!-- <div class="main-panel">
				<div class="content">
					<div class="container-fluid">
						<span id="stats_traffic" class="h2 font-weight-bold mb-0"></span>
                    </div> -->
                    <p class="mt-3 mb-0 text-muted text-sm">
                    </p> 
                  <!-- Page content -->
      <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>Awesome-pyecharts</title>
                                <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
                    
                    </head>
                    <body>
                        <div id="0a9623c33e2542acb72a19a0118da959" class="chart-container" style="width:900px; height:600px;"></div>
                        <script>
                            var chart_0a9623c33e2542acb72a19a0118da959 = echarts.init(
                                document.getElementById('0a9623c33e2542acb72a19a0118da959'), 'white', {renderer: 'canvas'});
                            var option_0a9623c33e2542acb72a19a0118da959 = {
                        "animation": true,
                        "animationThreshold": 2000,
                        "animationDuration": 1000,
                        "animationEasing": "cubicOut",
                        "animationDelay": 0,
                        "animationDurationUpdate": 300,
                        "animationEasingUpdate": "cubicOut",
                        "animationDelayUpdate": 0,
                        "color": [
                            "DarkCyan",
                            "Turquoise",
                            "#c23531",
                            "#2f4554",
                            "#61a0a8",
                            "#d48265",
                            "#749f83",
                            "#ca8622",
                            "#bda29a",
                            "#6e7074",
                            "#546570",
                            "#c4ccd3",
                            "#f05b72",
                            "#ef5b9c",
                            "#f47920",
                            "#905a3d",
                            "#fab27b",
                            "#2a5caa",
                            "#444693",
                            "#726930",
                            "#b2d235",
                            "#6d8346",
                            "#ac6767",
                            "#1d953f",
                            "#6950a1",
                            "#918597"
                        ],
                        "series": [
                            {
                                "type": "bar",
                                "name": "\u73b0\u6709\u804c\u5de5",
                                "legendHoverLink": true,
                                "data": [
                                    "30",
                                    "32",
                                    "33",
                                    "35",
                                    "31",
                                    "28",
                                    "29",
                                    "31",
                                    "",
                                    "",
                                    "",
                                    "",
                                    "",
                                    ""
                                ],
                                "showBackground": false,
                                "stack": "stack1",
                                "barMinHeight": 0,
                                "barCategoryGap": "20%",
                                "barGap": "30%",
                                "large": false,
                                "largeThreshold": 400,
                                "seriesLayoutBy": "column",
                                "datasetIndex": 0,
                                "clip": true,
                                "zlevel": 0,
                                "z": 2,
                                "label": {
                                    "show": true,
                                    "position": "inside",
                                    "color": "white",
                                    "margin": 8,
                                    "fontSize": 10
                                },
                                "rippleEffect": {
                                    "show": true,
                                    "brushType": "stroke",
                                    "scale": 2.5,
                                    "period": 4
                                }
                            },
                            {
                                "type": "bar",
                                "name": "\u5458\u5de5\u7f3a\u53e3",
                                "legendHoverLink": true,
                                "data": [
                                    "70",
                                    "68",
                                    "67",
                                    "65",
                                    "69",
                                    "72",
                                    "71",
                                    "69",
                                    "",
                                    "",
                                    "",
                                    "",
                                    "",
                                    ""
                                ],
                                "showBackground": false,
                                "stack": "stack1",
                                "barMinHeight": 0,
                                "barCategoryGap": "20%",
                                "barGap": "30%",
                                "large": false,
                                "largeThreshold": 400,
                                "seriesLayoutBy": "column",
                                "datasetIndex": 0,
                                "clip": true,
                                "zlevel": 0,
                                "z": 2,
                                "label": {
                                    "show": true,
                                    "position": "inside",
                                    "color": "white",
                                    "margin": 8,
                                    "fontSize": 10
                                },
                                "rippleEffect": {
                                    "show": true,
                                    "brushType": "stroke",
                                    "scale": 2.5,
                                    "period": 4
                                }
                            }
                        ],
                        "legend": [
                            {
                                "data": [
                                    "\u73b0\u6709\u804c\u5de5",
                                    "\u5458\u5de5\u7f3a\u53e3"
                                ],
                                "selected": {
                                    "\u73b0\u6709\u804c\u5de5": true,
                                    "\u5458\u5de5\u7f3a\u53e3": true
                                },
                                "show": true,
                                "padding": 5,
                                "itemGap": 10,
                                "itemWidth": 25,
                                "itemHeight": 14
                            }
                        ],
                        "tooltip": {
                            "show": true,
                            "trigger": "item",
                            "triggerOn": "mousemove|click",
                            "axisPointer": {
                                "type": "line"
                            },
                            "showContent": true,
                            "alwaysShowContent": false,
                            "showDelay": 0,
                            "hideDelay": 100,
                            "textStyle": {
                                "fontSize": 14
                            },
                            "borderWidth": 0,
                            "padding": 5
                        },
                        "xAxis": [
                            {
                                "show": true,
                                "scale": false,
                                "nameLocation": "end",
                                "nameGap": 15,
                                "gridIndex": 0,
                                "inverse": false,
                                "offset": 0,
                                "splitNumber": 5,
                                "minInterval": 0,
                                "splitLine": {
                                    "show": false,
                                    "lineStyle": {
                                        "show": true,
                                        "width": 1,
                                        "opacity": 1,
                                        "curveness": 0,
                                        "type": "solid"
                                    }
                                },
                                "data": [
                                    "2012",
                                    "2013",
                                    "2014",
                                    "2015",
                                    "2016",
                                    "2017",
                                    "2018",
                                    "2019",
                                    "",
                                    "",
                                    "",
                                    "",
                                    "",
                                    ""
                                ]
                            }
                        ],
                        "yAxis": [
                            {
                                "show": true,
                                "scale": false,
                                "nameLocation": "end",
                                "nameGap": 15,
                                "gridIndex": 0,
                                "inverse": false,
                                "offset": 0,
                                "splitNumber": 5,
                                "minInterval": 0,
                                "splitLine": {
                                    "show": false,
                                    "lineStyle": {
                                        "show": true,
                                        "width": 1,
                                        "opacity": 1,
                                        "curveness": 0,
                                        "type": "solid"
                                    }
                                }
                            }
                        ],
                        "title": [
                            {
                                "text": "\u517b\u8001\u4ece\u4e1a\u4eba\u5458\uff08\u5355\u4f4d\uff1a%\uff09",
                                "padding": 5,
                                "itemGap": 10
                            }
                        ],
                        "dataZoom": {
                            "show": true,
                            "type": "slider",
                            "realtime": true,
                            "start": 20,
                            "end": 80,
                            "orient": "horizontal",
                            "zoomLock": false,
                            "filterMode": "filter"
                        }
                    };
                            chart_0a9623c33e2542acb72a19a0118da959.setOption(option_0a9623c33e2542acb72a19a0118da959);
                        </script>
                    </body>
                    </html>
                    
                    
					
					

</div>
</div>
</div>
</div>
<div class="col-xl-4">
	<div class="card shadow">
	  <div class="card-header bg-transparent">
		<div class="row align-items-center">
		  <div class="col">
			<h3>数据介绍：</h3>
			<!-- <h2 class="mb-0">养老服务价格</h2> -->
		  </div>
		</div>
	  </div>
	  <div class="card-body">
		<!-- Chart -->
		<div style="height: 100%;width: 100%">
		  <h4>2019年</h4>
		  <h4>不同年份养老从业人员比重</h4>
		  <p> 1.不同年份养老从业人员比重占比最多的年份是2015年，占比35%，市场缺口为65%，从事该行业的员工大部分是养老护工</p>
		  <p>2.从2012-2019年来看，现在从事养老行业的人员的比重比较平稳，大都维持在35%左右，市场缺口极大，伴随着人口老龄化趋势的到来，相信在未来几年内，从事养老行业的人员会越来越多元化</p>

		<!-- </div>
	  </div>
	</div>
  </div>
</div> -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script>
	$( function() {
		$( "#slider" ).slider({
			range: "min",
			max: 100,
			value: 40,
		});
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ]
		});
	} );
</script>
</html>